<template>
  <div>
    <breadcrumb :data="['首页','订单管理','订单列表']" />
    <el-card class="tableTop">
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="gettableData">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="gettableData"
              @clear="gettableData"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="tableData" ref="table" border stripe class="tableTop">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="payNumber" label="订单编号" width="430" align="center"></el-table-column>
        <el-table-column prop="payMoney" label="订单价格" width="80" align="center"></el-table-column>
        <el-table-column prop="payLive" label="是否付款" width="100" align="center">
          <slot slot-scope="scope">
            <el-tag type="success" v-if="scope.row.payLive" effect="dark">已付款</el-tag>
            <el-tag type="danger" v-else effect="dark">未付款</el-tag>
          </slot>
        </el-table-column>
        <el-table-column prop="runLive" label="是否发货" width="80" align="center">
          <slot slot-scope="scope">{{scope.row.runLive?'是':'否'}}</slot>
        </el-table-column>
        <el-table-column prop="payDate" label="下单时间" width="200" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <el-row justify="center">
            <el-button type="primary" icon="el-icon-edit" size="small" @click="showBox()"></el-button>
            <el-button
              type="success"
              icon="el-icon-location-information"
              size="small"
              @click="showProgressBox"
            ></el-button>
          </el-row>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        class="page tableTop"
      ></el-pagination>
    </el-card>
    <el-dialog title="修改地址" :visible.sync="addressVisible" width="50%" @close="dialogClose">
      <el-form
        :model="addressForm"
        status-icon
        :rules="rules"
        ref="addressForm"
        label-width="100px"
      >
        <el-form-item label="城市/地区" prop="address1">
          <el-cascader
            placeholder="请选择省市区"
            class="el-cascader"
            v-model="addressForm.address1"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input type="text" v-model="addressForm.address2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressVisible = false">取 消</el-button>
        <el-button type="primary" @click="addressVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(activity, index) in progressData"
          :key="index"
          color="#0bbd87"
          :timestamp="activity.datetime"
        >
          <el-tag type="success" hit>{{activity.place}}</el-tag>
          <br />
          {{activity.info}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
<script>
import breadcrumb from "../son/breadcrumb.vue";
import getCity from "./getCity.js";
import { log } from "util";
export default {
  components: {
    breadcrumb
  },
  created() {
    this.getTableData();
    console.log(getCity);
  },
  data() {
    return {
      /*物流进度对话框  */
      progressVisible: false,
      addressVisible: false,
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      tableData: [],
      rules: {
        address1: [
          { required: true, message: "请选择省市区", rigger: blur, type: Array }
        ],
        address2: [{ required: true, message: "请输入详细地址", rigger: blur }]
      },
      addressForm: {
        address1: [],
        address2: ""
      },
      options: getCity,
      progressData: []
    };
  },
  methods: {
    /* 获取表数据 */
    getTableData() {
      this.tableData = [
        {
          payNumber: "45445hiiuhiu#%%$%$87897879",
          payMoney: 999,
          payLive: false,
          runLive: false,
          payDate: "2019-01-01 20:18:55"
        },
        {
          payNumber: "45445879877846%$87897879",
          payMoney: 1600,
          payLive: true,
          runLive: true,
          payDate: "2019-01-04 20:18:55"
        },
        {
          payNumber: "454441234324#%%$%$87897879",
          payMoney: 1999,
          payLive: false,
          runLive: false,
          payDate: "2019-01-01 20:18:55"
        },
        {
          payNumber: "45445hiiuhihmhhj89fjyyj879",
          payMoney: 499,
          payLive: true,
          runLive: false,
          payDate: "2019-01-01 20:18:55"
        },
        {
          payNumber: "45445hiiuhihmhhj89fjyyj879",
          payMoney: 99,
          payLive: true,
          runLive: false,
          payDate: "2020-11-01 20:18:55"
        },
        {
          payNumber: "4vvxver5hiiuhihmhhj89fjyyj879",
          payMoney: 9699,
          payLive: true,
          runLive: false,
          payDate: "2019-11-21 20:18:55"
        }
      ];
    },
    /* 查询事件 */
    gettableData() {},
    /* 每页的个数发生改变 */
    handleSizeChange(newSize) {},
    /* 页数发生改变 */
    handleCurrentChange(newpage) {},
    /* 展示修改地址对话框 */
    showBox() {
      this.addressVisible = true;
    },
    dialogClose() {
      this.$refs.addressForm.resetFields();
      console.log(this.addressForm);
    },
    /* 物流进度 */
    showProgressBox() {
      this.progressVisible = true;
      this.progressData = [
        {
          datetime: "2014-07-08 09:20:44",
          place: "哈尔滨学府三部",
          info: "哈尔滨学府三部 派件已 签收 ,签收人是 拍照签收 "
        },
        {
          datetime: "2014-03-26  20:58:40",
          place: "惠州市区",
          info: "惠州市区 吕记仓二 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-03-26 13:14:44",
          place: "番禺市桥",
          info: "番禺市桥 小谷已揽件,进入公司分捡"
        },
        {
          datetime: "2014-03-26 10:26:48",
          place: "靖江",
          info: "快件到达 靖江 ,正在分捡中,上一站是 无锡中转部"
        },
        {
          datetime: "2014-03-25 10:45:13",
          place: "嘉兴",
          info: "快件到达 嘉兴 ,正在分捡中,上一站是 嘉兴中转部"
        },
        {
          datetime: "2014-03-24 15:47:31",
          place: "南山蛇口",
          info: "南山蛇口 董平 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-03-23 14:40:23",
          place: "广州",
          info: "快件离开 广州中心 ,已发往 广州石井"
        },
        {
          datetime: "2014-03-09 16:49:27",
          place: "福州鼓楼一部",
          info: "福州鼓楼一部 黄福生 正在派件"
        },
        {
          datetime: "2014-03-06 17:26:11",
          place: "广州海珠",
          info: "广州海珠 蒋绪斌 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-03-04 08:00:57",
          place: "温州",
          info: "快件离开 温州 ,已发往 温州解放街"
        },
        {
          datetime: "2014-03-04 06:22:53",
          place: "襄樊中转",
          info: "快件到达 襄樊中转 ,正在分捡中,上一站是 襄樊"
        },
        {
          datetime: "2014-02-28 02:38:27",
          place: "杭州操作部",
          info: "快件离开 杭州操作部 ,已发往 杭州城南区"
        },
        {
          datetime: "2014-02-28 00:50:59",
          place: "外高桥南部",
          info: "快件到达 外高桥南部 ,正在分捡中,上一站是 上海"
        },
        {
          datetime: "2014-02-27 17:50:56",
          place: "珠江新城",
          info: "珠江新城 胡浩 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-02-25 19:28:30",
          place: "惠阳",
          info: "惠阳 梁东明 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-02-17 15:39:50",
          place: "白云金贵",
          info: "白云金贵 朱先生 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-01-03 14:59:49",
          place: "江门江海",
          info: "江门江海 江门刘志坚打包客户 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-01-03 11:24:49",
          place: "荔湾",
          info: "荔湾 余达兴（刘） 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-01-01 15:57:51",
          place: "惠阳",
          info: "惠阳 黄海华 已揽件,进入公司分捡"
        },
        {
          datetime: "2014-01-01 10:19:47",
          place: "福鼎",
          info: "福鼎 59320.222 已揽件,进入公司分捡"
        }
      ];
    }
  }
};
</script>
<style scoped>
.el-cascader {
  width: 100%;
}
</style>